<template>
  <div class="container">
    <div id="login">
      <div class="loginHead">OA办公系统</div>
      <input id="username" type="text" required="required" placeholder="账号" name="u" v-model="username"
             @keyup="show($event)">
      <input id="password" type="password" required="required" placeholder="密码" name="p" v-model="password"
             @keyup="show($event)">
      <button id="up" class="but" type="submit" @click="login">登录</button>
      <div class="down">
        <span>没有注册?</span>
        <a class="link" @click="changeCommon">注册</a>
      </div>
      <div id="Powered">
        <p>Powered by 学工在线技术部</p>
      </div>
    </div>
  </div>
</template>

<script>
  import router from '../../router/index'
  import {Toast} from 'vant'

  export default {
    name: "LoginEntry",
    components:{
      [Toast.name]: Toast
    },
    props: ["current"],
    data() {
      return {
        username: "lisongqian",
        password: "lisongqian"
      }
    },
    methods: {
      login() {
        let _this = this;
        if (_this.username === "" && _this.password === "") {
          Toast.fail('用户名和密码不能为空！');
          return;
        }
        if (_this.username === "") {
          Toast.fail('用户名不能为空！');
          return;
        }
        if (_this.password === "") {
          Toast.fail('密码不能为空！');
          return;
        }
        if (_this.username.length < 4) {
          Toast.fail('用户名应大于4位！');
          return;
        }
        if (_this.username.length > 20) {
          Toast.fail('用户名应小于20位！');
          return;
        }
        if (_this.password.length < 6) {
          Toast.fail('密码应大于6位！');
          return;
        }
        let data = _this.$qs.stringify({
          'user_name': _this.username,
          'password': _this.password
        });
        _this.$http.post(_this.apiUrl("user/index/login"), data, {'Content-Type': 'application/x-www-form-urlencoded'})
          .then((res) => {
            // console.log(res.data);
            let statusCode = res.data.statusCode;
            if (statusCode === 200) {
              let token = res.data.data.token;
              let expire_time = res.data.data.expire_time;
              Toast.success('登陆成功！');
              _this.checkCookie(token, expire_time);
              if (this.$route.query.redirect) {
                let redirect = this.$route.query.redirect;
                router.push({
                  path: redirect
                })
              }
              else {
                router.push({
                  path: '/'
                })
              }
            }
            else {
              let reason = res.data.reason;
              Toast.fail('登陆失败, ' + reason);
            }
          });
      },
      changeCommon() {
        let _this = this;
        _this.$emit("changeCurrent", "LoginRegister");
      },
      show: function (ev) {
        if (ev.keyCode === 13) {
          document.getElementById("up").click();
        }
      },
    }
  }
</script>

<style scoped>
  #username{
    margin-left: 0;
    margin-right: 0;
  }

  #password{
    padding-right: 20px;
  }

  .container {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    width: 400px;
    height: 100%;
  }

  .loginHead {
    font-size: 2em;
    font-weight: 600;
    width: auto;
    height: auto;
    color: white;
  }

  #login {
    width: 100%;
    height: 350px;
  }

  #login input {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin-top: 6%;
    color: #fff;
    padding-left: 15px;
    border-top: none;
    border-right: none;
    border-bottom: 3px #fff solid;
    border-left: none;
    background: none;
    outline: none;
    font-size: 16px;
    border-radius: 0;
  }

  #login input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    border: 1px solid #CCC !important;
    border-radius: 25px;
    padding-left: 15px;
    box-sizing: border-box;
  }

  #login input::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 16px;
    color: white;
    border-radius: 0;
  }

  #login input::-moz-placeholder { /* WebKit browsers */
    font-size: 16px;
    color: white;
    border-radius: 0;
  }

  #login input:-ms-input-placeholder { /* WebKit browsers */
    font-size: 16px;
    color: white;
    border-radius: 0;
  }

  #login button {
    margin-top: 10%;
    color: white;
    outline: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: #0099FF;
    border-radius: 5px;
    border-style: none;
    font-size: 15px;
    -moz-border-radius: 25px; /* 老的 Firefox */
  }

  .down {
    margin-top: 10%;
    text-align: center;
    color: #595959;
  }

  .down .link{
    color: #0c79b1;
  }

  #Powered {
    margin: 10% auto 0 auto;
    width: 220px;
    color: white;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
  }

  @media screen and (max-width: 960px) {
    .container {
      width: 80%;
      margin-left: -40%;
      margin-top: -200px;
      height: 420px;
    }
  }
</style>
